import logo from "./logo.svg";
import React, { Component, Suspense } from "react";
import "./App.css";
import { Route, Link, NavLink, withRouter, Switch,Redirect } from "react-router-dom";
import Home from "./views/Home";

import ComContent from "./views/ComContent";
import RefsDemo from "./views/RefsDemo";
import MockVModel from "./views/MockVModel";
import CRUD from "./views/CRUD";
import Optimization from "./views/Optimization";
import ParentHuToSon from "./views/ComTongXin/ParentHuToSon";
import ParentToSonUseRef from "./views/ComTongXin/ParentToSonUseRef";
import BrotherChuan from "./views/ComTongXin/BrotherChuan";
import BrotherChuanUseStateUp from "./views/ComTongXin/BrotherChuanUseStateUp";
import ContextTree from "./views/ComTongXin/ContextTree";
import HOC from "./views/HOC";
import SecondRoute from "./views/SecondRoute";
import Params from "./views/RouteChuan/Params";
import ParamsDetail from "./views/RouteChuan/Params/Detail";
import Query from "./views/RouteChuan/Query";
import QueryDetail from "./views/RouteChuan/Query/Detail";
import Search from "./views/RouteChuan/Search";
import SearchDetail from "./views/RouteChuan/Search/Detail";
// import RouterContextObj from "./views/RouterContextObj";
import NotFound from "./views/NotFound";
import WithLazy from "./router/withLazy"


const RouterContextObj = React.lazy(()=>import("./views/RouterContextObj"));
const Lifecycle1 = React.lazy(()=>import("./views/Lifecycle"));

// import Lifecycle from "./views/Lifecycle";

class App extends Component {
  goContextTree = () => {
    console.log("App组件：this.props", this.props);
    this.props.history.push("/ContextTree");
  };

  render() {
    return (
      <div className="app-box">
        <ul className="menu-box">
          <li>
            <Link to="/Home">首页</Link>
          </li>
          <li>
            {/* <Link to="/ComContent">组件的内容</Link> */}
            {/* <Link to={{pathname:"/ComContent"}}>组件的内容</Link> */}
            <NavLink to={{ pathname: "/ComContent" }} activeClassName="active">
              组件的内容
            </NavLink>
          </li>
          <li>
            {/* <Link to="/RefsDemo">refs</Link> */}
            <NavLink to={{ pathname: "/RefsDemo" }} activeClassName="active">
              refs
            </NavLink>
          </li>
          <li>
            <Link to="/MockVModel">受控组件(双向绑定)</Link>
          </li>
          <li>
            <Link to="/CRUD">CRUD案例</Link>
          </li>
          <li>
            <Link to="/Lifecycle">生命周期</Link>
          </li>
          <li>
            <Link to="/Optimization">性能优化</Link>
          </li>
          <li>
            <span>组件间通信</span>
            <ul>
              <li>
                <Link to="/ParentHuToSon">父子组件用props</Link>
              </li>
              <li>
                <Link to="/ParentToSonUseRef">父-》子用ref</Link>
              </li>
              <li>
                <Link to="/BrotherChuan">兄弟组件（非父子）</Link>
              </li>
              <li>
                <Link to="/BrotherChuanUseStateUp">兄弟组件（状态提升）</Link>
              </li>
              <li>
                <Link to="/ContextTree">状态树传参（跨级）</Link>
              </li>
            </ul>
          </li>
          <li>
            <Link to="/HOC">高阶组件</Link>

            <input
              type="button"
              value="去状态树传参页面"
              onClick={this.goContextTree}
            />
          </li>
          <li>
            <Link to="/SecondRoute">部门用户管理</Link>
          </li>
          <li>
            <span>路由传参</span>
            <ul>
              <li>
                <Link to="/Params">Params</Link>
              </li>
              <li>
                <Link to="/Query">Query</Link>
              </li>
              <li>
                <Link to="/Search">Search</Link>
              </li>
            </ul>
          </li>
          <li>
            <Link to="/RouterContextObj">路由上下文对象</Link>
          </li>
        </ul>
        <div className="content-box">
          <Switch>
            {/* <Route exact={true} path="/" component={Home} /> */}
            <Redirect  exact={true} from="/" to="/Home" ></Redirect>
            <Route path="/Home" component={Home} />
            <Route path="/ComContent" component={ComContent} />
            <Route path="/RefsDemo" component={RefsDemo} />
            <Route path="/MockVModel" component={MockVModel} />
            <Route path="/CRUD" component={CRUD} />
            {/* <Route path="/Lifecycle" component={()=><Suspense><Lifecycle1></Lifecycle1></Suspense>} /> */}
            {/* <Route path="/Lifecycle" component={()=><WithLazy path="./views/Lifecycle.js"></WithLazy>} /> */}
            {/* <Route path="/Lifecycle" render={()=>WithLazy("../views/Lifecycle/index.js")} /> */}
            <Route path="/Lifecycle" component={WithLazy("../views/Lifecycle/index.js")} />
            
            
            <Route path="/Optimization" component={Optimization} />
            <Route path="/ParentHuToSon" component={ParentHuToSon} />
            <Route path="/ParentToSonUseRef" component={ParentToSonUseRef} />
            <Route path="/BrotherChuan" component={BrotherChuan} />
            <Route
              path="/BrotherChuanUseStateUp"
              component={BrotherChuanUseStateUp}
            />
            <Route path="/ContextTree" component={ContextTree} />
            <Route path="/HOC" component={HOC} />
            <Route path="/SecondRoute" component={SecondRoute} />
            <Route path="/Params" component={Params} />
            <Route path="/ParamsDetail/:newsid" component={ParamsDetail} />
            <Route path="/Query" component={Query} />
            <Route path="/QueryDetail" component={QueryDetail} />
            <Route path="/Search" component={Search} />
            <Route path="/SearchDetail" component={SearchDetail} />
            {/* <Route path="/RouterContextObj" component={RouterContextObj} /> */}
            <Route path="/RouterContextObj" component={()=><Suspense><RouterContextObj></RouterContextObj></Suspense>} />
           
            <Route component={NotFound}></Route>
          </Switch>
        </div>
      </div>
    );
  }
}

export default withRouter(App);
